<template>
  <div>
    <div class="tablesB">
       <ViewTitle text="基础信息" />
      <div class="selects">
        <div v-for="(item,index) in arryPut" :key="index">
          <div>{{item.title}}:</div>
         
           <div v-if="item.props=='gender'">
            <el-input


               :value="$baseBai['gender'][(thatF.bl.dataDetail[item.props]-1)].label"
                    disabled
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>
             <div v-else-if="item.props=='is_infect'">
              <el-input v-if="thatF.bl.dataDetail[item.props]==1" value="是"  disabled   :placeholder="item.placeholder" >
              </el-input>
              <el-input v-else-if="thatF.bl.dataDetail[item.props]==2"  value="否" disabled :placeholder="item.placeholder" ></el-input>
              <el-input v-else value="" disabled :placeholder="item.placeholder"> </el-input>
          </div>
          <div v-else>
            <el-input

                v-model="thatF.bl.dataDetail[item.props]"
                    disabled
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>
        </div>
      
      </div>
      <ViewTitle text="诊断" />
      <div >
         <el-table  :data="thatF.bl.dataDetail.diagnosis" style="width: 70%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <template v-for="(item, index) in tableTitle">
           
            <el-table-column
             
              :prop="item.prop"
              :label="item.name"
              :key="index"
             
            >
            </el-table-column>
          </template>
           <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-popover
                        placement="right"
                        
                      
                       
                        trigger="click">
                        <el-table  v-loading="params.loading"     @current-change="querySelect"
                         highlight-current-row
                          height="300"  :data="params.data">
                          <el-table-column property="name" label="姓名"></el-table-column>
                         <el-table-column   property="code" label="编号"></el-table-column>
                            <el-table-column
                            width="200"
                          align="right">
                          <template slot="header" slot-scope="scope">
                            <el-input
                              v-model="params.keyword"
                              size="mini"
                              @input="getSearch"
                              
                              placeholder="输入关键字搜索"/>
                          </template>
                          </el-table-column>
                        </el-table>
                           <el-pagination
                            :current-page="params.page"
                            :page-size="params.limit"
                            @current-change="selectPage"
                            :total="params.count"
                            layout="prev, pager, next"
                          >
                          </el-pagination> 
                        <el-button slot="reference" @click.native.prevent="editIndex(scope.$index, tableData1)">编辑</el-button>
                      </el-popover>
                </template>
              </el-table-column>

           <div v-if="tableData1.length>0">
            <el-table :data="tableData1" style="width: 100%">
              <el-table-column
                v-for="(item, index) in tableTitle2"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
              >
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData1)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div> 
         
        </el-table>
      
      </div>
       <ViewTitle style="margin-top:30px" text="就诊信息" />
      <div class="list">
            <div v-for="(item,index) in listPut" :key="index">
            <div>{{item.title}}:</div>
            <div >
            <el-input
            
                type="textarea"
                   :rows="3"
                   v-model="thatF.bl.dataDetail[item.props]"
                
               
            >
            </el-input>
          </div>
        </div>
          
     <el-button type="primary" style="width:100px " @click="saveMedicalRecord"
          >保 存</el-button
        >
        
      </div>
    </div>
  </div>
</template>
<script>
let t;
import selectInput from "@/components/select";
import ViewTitle from "@/forComponents/viewTitle/index.vue";
import { mapState } from "vuex";
import {saveMedicalRecord} from  "@/api/zhuyanre"
export default {
  props: ["thatF"],

  data() {
    return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
         arryPut:[
             {
                 placeholder:'请输入',
                 props:'name',
                
                 title:'姓名',
             },
               {
                 placeholder:'请输入',
                 props:'gender',
                 title:'性别',
             },
               {
                 placeholder:'请输入',
                 props:'birthday',
                 title:'出生日期',
             },
               {
                 placeholder:'请输入',
                 props:'patient_no',
                 title:'门诊号',
             },
               {
                 placeholder:'请输入',
                 props:'dept_name',
                 title:'科室',
             },
               {
                 placeholder:'请输入',
                 props:'real_name',
                 title:'接诊医生',
             }, {
                 placeholder:'请输入供史人',
                 props:'with_user',
                 title:'供史人',
             },
                  {
                 placeholder:'请输入',
                 props:'start_time',
                 title:'接诊时间',
             },
               {
                 placeholder:'请输入',
                 props:'attack_date',
                 title:'发病时间',
             },
             {
                 placeholder:'请输入',
                 props:'is_infect',
                 title:'是否传染',
             },
            
         ],
         tableTitle: [
        {
          prop: "name",
          name: "名称",
        },

        {
          prop: "code", 
          name: "编号",
        },
       
      ],
      tableTitle2:'',
         listPut:[
              // {
            //      placeholder:'请输入',
            //      props:'with_user',
            //      title:'供史人',
            //  },
              {
                 placeholder:'请输入',
                 props:'main_desc',
                 title:'主诉',
             },
             
               {
                 placeholder:'请输入',
                 props:'medical_now',
                 title:'现病史',
             },
             {
                 placeholder:'请输入',
                 props:'medical_history',
                 title:'既往史',
             },
             {
                 placeholder:'请输入',
                 props:'family_history',
                 title:'家族史',
             },
             {
                 placeholder:'请输入',
                 props:'allergy_history',
                 title:'过敏史',
             },
             
            
             {
                 placeholder:'请输入',
                 props:'body_check',
                 title:'体格检查',
             },
             {
                 placeholder:'请输入',
                 props:'spirit_check',
                 title:'精神检查',
             },
             {
                 placeholder:'请输入',
                 props:'check_result',
                 title:'检查结果',
             },
              {
                 placeholder:'请输入',
                 props:'treatment',
                 title:'治疗意见',
             },
             {
                 placeholder:'请输入',
                 props:'instruction',
                 title:'指导意见',
             },
              {
                 placeholder:'请输入',
                 props:'remark',
                 title:'备注',
             },
            
         ],
              tableData1:[],

      params: {
        show: false,

        page: 1,
        limit: 20,
        loading: false,
        data: [],
        count: 0,
        keyword:'',
        index:0,
      },
        
    };
  },

  mounted() {
    t = this;
   t.tableTitle2 = this.$baseBai["workstation"]["right_two_table_title"];
   t.getList();
  },
  methods: {
    getSearch(){
       this.params.page = 1;
        this.getList();
    },
    selectPage(e){
         this.params.page = e;
      this.getList();
    },
    editIndex(e,v){
      console.log(e,v)
      t.params.index=e;
      
    },
    querySelect(e){
      console.log("e",e)
      console.log("thatF.bl.dataDetail.diagnosis",this.thatF.bl.dataDetail.diagnosis)
     
     if(this.thatF.bl.dataDetail.diagnosis.findIndex(v=>v.id==e.id)==-1){
        this.$set(this.thatF.bl.dataDetail.diagnosis, t.params.index, e)
     }else{
      
      this.$message({
          message: '该诊断已经有了',
          type: 'warning'
        });
     }
      // this.$set(this.thatF.bl.dataDetail.diagnosis, t.params.index, e)
    },
    getList(){
       this.params.loading = true;
      let d = {
        keyword: this.params.keyword,
        page: this.params.page,
        limit: this.params.limit,
      };
      
    
      t["_API"]['getClinic_doctorgetDiseaseDict'](d).then((res) => {
        this.params.loading = false;
        console.log("ress", res);
        if (res.code == 200) {
         
              this.params.data = res.data.lists.map((v) => {
                return {
                  name: v.name,
                  id: v.id,
                  ...v,
                };
              });
           

          console.log(" this.params.data ", this.params.data);

          this.params.count = res.data.count;
        }
      });
    },
    
      Inputang(){
        console.log(this.thatF.bl.dataDetail)
      },
    saveMedicalRecord(){
        saveMedicalRecord(this.thatF.bl.dataDetail).then(res=>{
         if(res.code==200){
           
                        this.$message({
                  message: "保存成功",
                  type: "success"
                });
                setTimeout(() => {
                  t.thatF.getList();
                  t.thatF.bl.show=false;
                
                }, 1000);
         }
        })
    }
  },
  components: {
        ViewTitle,
        selectInput
  },
};
</script>
<style lang='scss' scoped>

/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 20px;
    width: 32%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}

/deep/ .list {
  display: flex;
//   align-items: center;
justify-content: center;
  flex-direction: column;
  margin-left: 20px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
 > div > div:nth-child(2) {
  
  
      width: 50%;
    
  }

  > div {
    margin-top: 20px;
    align-items: center;
    display: flex;

  }
 
}

/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 20px;
    width: 32%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}
</style>